<template>
  <el-container>
    <el-aside width="500px">
      <el-container>
        <el-header>
          <div class="right-panel-search">
            <el-input
              placeholder="用户名称"
              v-model="searchList.name"
              clearable
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="getData"
            ></el-button>
            <el-button
              type="info"
              plain
              icon="el-icon-refresh"
              @click="resetSearch"
              :disabled="searchList.name.length < 1"
            ></el-button>
          </div>
        </el-header>
        <el-main class="nopadding">
          <scTable
            ref="table"
            :apiObj="rolesList"
            row-key="id"
            stripe
            :paginationLayout="'prev, pager, next'"
            @selection-change="selectionChange"
          >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column type="index" label="#" width="50" />
            <el-table-column
              label="角色名称"
              prop="Name"
              width="150"
            ></el-table-column>
            <el-table-column
              label="描述"
              prop="Remark"
              width="150"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="60">
              <template #default="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="table_edit(scope.row, scope.$index)"
                >
                  操作
                </el-button>
              </template>
            </el-table-column>
          </scTable>
        </el-main>
      </el-container>
    </el-aside>
    <el-container>
      <el-main class="nopadding" ref="main">
        <save ref="saveCom"></save>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { getCurrentInstance, onMounted, reactive, ref, nextTick } from 'vue';
import scTable from '@/components/scTable/index.vue';
import { ElMessage } from 'element-plus';
import api from '@/api/role/index';
import save from './components/save.vue';
// 获取全局API
const { appContext } = getCurrentInstance();
// ref 获取组件实例
const kxTable = ref();
const saveCom = ref();
const rolesList = api.GetRoles;
// loading
let loading = ref(false);

// 死数据
const height = '100%';
const emptyText = '暂无数据';

// 表格数据
const tableData = ref([]);

// 总条数
const total = ref(0);

// 查询对象
let searchList = reactive({
  name: '',
  size: 10,
  page: 1,
});

// 加载用户列表
const getData = async () => {
  loading.value = true;
  const res = await api.GetRoles.post(searchList);
  loading.value = false;

  tableData.value = res.data.rows;
  searchList.size = res.data.pageSize;
  total.value = res.data.total;
  searchList.page = res.data.page;
};

onMounted(() => {
  getData();
});

// 获取用户菜单，ref 调用子组件方法
const table_edit = (row) => {
  saveCom.value.getTree(row.Id);
  saveCom.value.setData(row);
};

// 重置搜索
const resetSearch = () => {
  for (let key in searchList) {
    if (key == 'size') {
      searchList[key] = 10;
    } else if (key == 'page') {
      searchList[key] = 1;
    } else {
      searchList[key] = '';
    }
  }
  getData();
};
</script>
